<template>
  <div class="Chat-box">
    <div class="title">

      <h3>
        <span @click="back">
          <van-icon name="arrow-left" />
        </span>
        聊天
      </h3>
    </div>
    <div class="nav-list">

      <li>
        <router-link to="friend">好友</router-link>
      </li>
      <li>
        <router-link to="guanz">关注</router-link>
      </li>
      <li>
        <router-link to="fans">粉丝</router-link>
      </li>
      <li>
        <router-link to="qunz">群组</router-link>
      </li>
    </div>
    <div class="clr"></div>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
    methods: {
        back() {
            this.$router.push({path:"/news/msg"})
        }
    }
};
</script>

<style lang="scss" scoped>
a {
  list-style: none;
  color: white;
}
.Chat-box {
  color: white;
  .title {
    width: 90%;
    height: 56px;
    // background-color: aqua;
    margin: 30px auto;

    h3 {
      font-size: 40px;
      // display: inline-block;
      margin: 0 auto;
      text-align: center;
      color: rgba(154, 154, 154, 100);
      span {
        float: left;
        line-height: 56px;
      }
    }
  }
  .nav-list {
    width: 90%;
    margin: 0 auto;
    li {
      float: left;
      height: 55px;
      color: white;
      color: rgba(108, 108, 108, 100);
      font-size: 32px;
      margin: 0 10px;
      border-bottom: 2px solid #cecece;
    }
  }
  .clr{
    clear: both;
  }
  
  
}
</style>